<template>
  <div class="planList">
    <!-- <img alt="Vue logo" src="../assets/logo.png" /> -->
    <van-tabs v-model="active">
      <van-tab title="最近出发">
        <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
        >
          <!--            <planItem v-for="(n,index) in recentPlans" :key=index :destination="n.destination" :formatDay="n.formatDay"/>-->
          <van-cell>
            <div v-for="(n,index) in recentPlans" :key=index>
              <planItem v-if="isRecent(n.date)===false" :destination="n.destination" :date="n.date"/>
            </div>
          </van-cell>
        </van-list>
      </van-tab>

      <van-tab title="所有计划">
        <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
        >
          <van-cell>
            <planItem v-for="(n,index) in allPlans" :key=index :destination="n.destination" :date="n.date"/>
          </van-cell>
        </van-list>
      </van-tab>
    </van-tabs>
    <!--    <footerbar></footerbar>-->
  </div>
</template>

<script>
// @ is an alias to /src
// import footerBar from "@/components/footerBar.vue";
import planItem from "../components/planItem.vue";

export default {
  name: "planList",

  data() {
    return {
      active: 0,
      recentPlans: [
        // {destination: "南京市", formatDay: "6/3", date: "6/3-6/7"},
        // {destination: "上海市", formatDay: "6/8", date: "6/8-612"},
        // {destination: "成都市", formatDay: "6/29", date: "6-29-7/1"},
        // {destination: "北京市", formatDay: "7/5", date: "7/5-7,7"},
        {destination: "南京市", date: "6/3-6/7"},
        {destination: "上海市", date: "6/8-612"},
      ],
      allPlans: [
        {destination: "南京市", date: "6/3-6/7"},
        {destination: "上海市", date: "6/8-612"},
        {destination: "成都市", date: "6-29-7/1"},
        {destination: "北京市", date: "7/5-7,7"},
        {destination: "天津市", date: "8/1-8/3"},
        // {destination: "南京市", formatDay: "6/3", date: "6/3-6/7"},
        // {destination: "上海市", formatDay: "6/8", date: "6/8-612"},
        // {destination: "成都市", formatDay: "6/29", date: "6-29-7/1"},
        // {destination: "北京市", formatDay: "7/5", date: "7/5-7,7"},
        // {destination: "天津市", formatDay: "8/1", date: "8/1-8/3"},
      ],
      loading: false,
      finished: false,
    };
  },
  methods: {
    onLoad() {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      let that = this
      setTimeout(() => {
        for (let i = 0; i < 10; i++) {
          // this.list.push(this.list.length + 1);
        }

        // 加载状态结束
        that.loading = false;

        // 数据全部加载完成
        if(that.list){
          if (that.list.length >= 40) {
            that.finished = true;
          }
        }

      }, 1000);
    },
    isRecent(outDay) {
      let day = new Date();
      if (outDay.split) {
        if (
            (
                (outDay.split('/')[0] * 30 + outDay.split('/')[1] - 15) < ((day.getMonth() + 1) * 30 + day.getDate())
            )
            &&
            (
                (outDay.split('/')[0] * 30 + outDay.split('/')[1]) > ((day.getMonth() + 1) * 30 + day.getDate())
            )
        ) {
          return true;
        };
      };
      return false;
    },
  },
  components: {
    // footerBar,
    planItem,
  },
};
</script>

<style scoped>
/* .planList {
  padding: 5px 13px 5px 13px;
} */
.van-tabs__nav {
  width: 50%;
}
</style>
